<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-03-26 13:18
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <div style="overflow-x: hidden">
    <x-attrs-header
      url="https://www.antdv.com/components/table-cn/#API"
      title="表格配置"
      @change="searchChangeHandler"
    />
    <x-render-form
      ref="xRenderForm"
      v-model="xDesignTable.tablePropsData"
      :form-options="formOptions"
      @change="formChangeHandler"
    />
  </div>
</template>

<script>
import XAttrsHeader from '../../../../form/right/components/XDesignAttrsHeader'
import FormOptions from './options'
import {cloneDeep} from 'lodash'

export default {
  name:'XRenderTableProps',
  inject: ['xDesignTable'],
  components: {
    XAttrsHeader
  },
  computed: {
    formOptions: {
      get() {
        return cloneDeep(FormOptions)
      }
    }
  },
  methods: {
    searchChangeHandler(keyword) {
      const formOptions = cloneDeep(FormOptions)
      const showProps = []
      const hideProps = []
      for (const option of formOptions) {
        if (!option.formItem) {
          continue
        }
        const formItem = option.formItem
        if ((!!formItem.prop && formItem.prop.includes(keyword)) || (!!formItem.label && formItem.label.includes(keyword)) || (!!formItem.extra && formItem.extra.includes(keyword))) {
          showProps.push(formItem.prop)
        } else {
          hideProps.push(formItem.prop)
        }
      }
      this.$refs.xRenderForm.showComponents(...showProps)
      this.$refs.xRenderForm.hideComponents(...hideProps)
    },
    formChangeHandler({prop, value}) {
      if (prop === 'paginationPageSizeOptions') {
        try {
          this.$set(this.xDesignTable.tablePropsData, 'paginationPageSizeOptions', (new Function('return ' + value))())
        } catch (e) {
          console.error(`${prop}:${value},格式错误,无法转为数组`)
        }
      }
    }
  }
}
</script>

